<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="chrome=1">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  <style type="text/css">
    body,
    html,
    #container {
      width: 100%;
      height: 100%;
      margin: 0px
    }
  </style>
  <title>地图</title>
</head>

<body>
	<div class='buttom' id='clickMe'>
		按钮
		<img src="./picture/xiala.png" >
	</div>
	
	<style type="text/css">
		.buttom{
			position: fixed;
			top: 0;
			z-index: 99;
			width: 90px;
			height: 40px;
			background: #FFFFFF;
			box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.08);
			border-radius: 4px;
			opacity: 0.9;
		}
	</style>
  <div id="container" tabindex="0"></div>
  </script>
  <!-- 引入jquery -->
   <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
  <!-- // 引入 uni-app 的 sdk -->
  <script
    type="text/javascript"
    src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"
  ></script> 
  <!-- <script src="./data.js"> </script> -->
  <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a&plugin=AMap.MapType"></script> 
  <script src="http://a.amap.com/jsapi_demos/static/resource/heatmapData.js"></script>
  <script type="text/javascript">
    // console.log(data);
	// 请求
	$.ajax({
		url:"http://47.114.111.108:9020/app/homepage/enterpriseAnalysisMore",
		// dataType:'application/json',
		success:(res)=>{
			console.log('success',res)
		},
		complete:(res)=>{
			// console.log('complete',JSON.stringify(res))
			console.log('complete',res)
			var data =res.responseText.data
			console.log('complete',data)
		}
	})
	// web-view给uniapp传输数据
	document.addEventListener("UniAppJSBridgeReady", function () {
	        document
	          .getElementById("clickMe")
	          .addEventListener("click", function () {
	            let data = {
	              user_id: "ys123456",
	              user_token: "67374b30-cac6-4efb-adc9-88231b9ac44c",
	              user_info: {
	                name: "Iuhuy",
	                avatar:
	                  "http://thirdwx.qlogo.cn/mmopen/vi_32/EURpungADj4vP3UczBVvD1DcEUt9q7WFqc6mZlSZoXoS9PyaPicnX8pjmic0rLbmwYCSa247gibINd1dWr0ic1QTvw/132",
	              },
	            };
	            console.log("给 uni-app 发送数据", data);
	
	            uni.postMessage({
	              data: data,
	            });
	          });
	      });
    var map = new AMap.Map('container', {
      resizeEnable: true,
      center: [118.336751, 29.827279],
       // center: [116.418261, 39.921984],
	   // layers: [new AMap.TileLayer.Satellite()],
      mapStyle: 'amap://styles/487d6c079d0be1880cdee002397f9462',
      zoom: 13
    });
	  // map.addControl(new AMap.MapType({
	  //           defaultType:0, //0代表默认，1代表卫星
	  //           showRoad:true//显示路况（右上角也可点击）
	  //       }));
	
    AMap.plugin('AMap.ToolBar', function () {
      var toolbar = new AMap.ToolBar();
      map.addControl(toolbar)
    })
	
	
	//行政区划查询
	var opts = {
	  subdistrict: 1, //返回下一级行政区
	  showbiz: false //最后一级返回街道信息
	};
	let district = new AMap.DistrictSearch(opts); //注意：需要使用插件同步下发功能才能这样直接使用
	
	//说明  district 参数对象是由 第四步引用插件是创建
	district.setLevel("district"); //行政区级别
	district.setExtensions('all');
	//行政区查询
	//按照adcode进行查询可以保证数据返回的唯一性
	let cityCode = "341004"; //注意这个参数必须是字符串,要不然显示不出来的
	district.search(cityCode, function (status, result) {
	  if (status === 'complete') {
	    // 绘制区域
	    getData(result.districtList[0]);
	  }
	});
    

    let polygons = []; //绘制区域面积图的数组
    function getData(data) {
      var bounds = data.boundaries;
      if (bounds) {
        for (var i = 0, l = bounds.length; i < l; i++) {
          var polygon = new AMap.Polygon({
            map: map,
            strokeWeight: 1,
            strokeColor: '#0091ea',
            fillColor: '#80d8ff',
            fillOpacity: 0.2,
            path: bounds[i]
          });
          polygons.push(polygon);
        }
        // map.setFitView(); //地图自适应、、会影响缩放层级
      }
    }
    /**
     * 步奏6中的polygons[] 就是我们绘制的区域数据,去过不需要的话,可以用for循环设置为空,就清除可
     */
    for (var i = 0, l = polygons.length; i < l; i++) {
      polygons[i].setMap(null);
    }

    let list0 = [];
    let list1 = [];
    let list2 = [];
    let list3 = [];

    for (var i = 0; i < data.list.length; i++) {
      if (data.list[i].Maps.hjgc01.state == 0) {
        console.log(data.list[i].Maps.hjgc01);
        list0.push([data.list[i].latitude, data.list[i].longitude, Math.ceil(data.list[i].Maps.hjgc01.value), data.list[i].name])
      } else if (data.list[i].Maps.hjgc01.state == 1) {
        list1.push([data.list[i].latitude, data.list[i].longitude, Math.ceil(data.list[i].Maps.hjgc01.value), data.list[i].name])
      } else if (data.list[i].Maps.hjgc01.state == 2) {
        list2.push([data.list[i].latitude, data.list[i].longitude, Math.ceil(data.list[i].Maps.hjgc01.value), data.list[i].name])
      } else if (data.list[i].Maps.hjgc01.state == 3) {
        list3.push([data.list[i].latitude, data.list[i].longitude, Math.ceil(data.list[i].Maps.hjgc01.value), data.list[i].name])
      }
    }

    var icon1 = new AMap.Icon({
      size: new AMap.Size(40, 50),    // 图标尺寸
      image: '/picture/hong.png',  // Icon的图像
      imageSize: new AMap.Size(40, 50)   // 根据所设置的大小拉伸或压缩图片
    });
    console.log(icon1);
    var icon2 = new AMap.Icon({
      size: new AMap.Size(40, 50),    // 图标尺寸
      image: './picture/lan.png',  // Icon的图像

      imageSize: new AMap.Size(40, 50)   // 根据所设置的大小拉伸或压缩图片
    });
    var icon3 = new AMap.Icon({
      size: new AMap.Size(40, 50),    // 图标尺寸
      image: './picture/hui.png',  // Icon的图像
      imageSize: new AMap.Size(40, 50)   // 根据所设置的大小拉伸或压缩图片
    });
    // 29.823015 118.363324
    // 创建一个 Marker 实例：
    // var marker = new AMap.Marker({
    //   position: new AMap.LngLat(118.363324, 29.823015),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
    //   title: '北京',
    //   icon: icon1, // 添加 Icon 实例


    // });

    // // 将创建的点标记添加到已有的地图实例：
    // map.add(marker);

    for (var i = 0; i < list0.length; i++) {
      var text1 = `<div class="cs1">
       <div class='text'> ${list0[i][2]}</div>
        </div>`
      let marker = new AMap.Marker({
        position: new AMap.LngLat(Number(list0[i][1]), Number(list0[i][0])),
        offset: new AMap.Pixel(-10, -10),
        // icon: icon1, // 添加 Icon 实例
        content: text1,  // 自定义点标记覆盖物内容
        zoom: 13
      });
      map.add(marker);
    }





    for (var i = 0; i < list0.length; i++) {
      let text = `<div class="cs1">
       <div class='text'> ${list0[i][2]}</div>
        </div>`
      let marker = new AMap.Marker({
        position: new AMap.LngLat(Number(list0[i][1]), Number(list0[i][0])),
        offset: new AMap.Pixel(-10, -10),
        // icon: icon1, // 添加 Icon 实例
        content: text1,  // 自定义点标记覆盖物内容
        zoom: 13
      });
      map.add(marker);
    }

    for (var i = 0; i < list1.length; i++) {
      let text = `<div class="cs2">
       <div class='text'> ${list1[i][2]}</div>
        </div>`
      let marker = new AMap.Marker({
        position: new AMap.LngLat(Number(list1[i][1]), Number(list1[i][0])),
        offset: new AMap.Pixel(-10, -10),
        // icon: icon1, // 添加 Icon 实例
        content: text,  // 自定义点标记覆盖物内容
        zoom: 13
      });
      map.add(marker);
    }

    for (var i = 0; i < list2.length; i++) {
      let text = `<div class="cs3">
       <div class='text'> ${list2[i][2]}</div>
       <div class='name'> ${list2[i][3]}</div>
        </div>`
      let marker = new AMap.Marker({
        position: new AMap.LngLat(Number(list2[i][1]), Number(list2[i][0])),
        offset: new AMap.Pixel(-10, -10),
        // icon: icon1, // 添加 Icon 实例
        content: text,  // 自定义点标记覆盖物内容
        zoom: 13
      });
      map.add(marker);
    } for (var i = 0; i < list3.length; i++) {
      let text = `<div class="cs4">
       <div class='text'> ${list3[i][2]}</div>
        </div>`
      let marker = new AMap.Marker({
        position: new AMap.LngLat(Number(list3[i][1]), Number(list3[i][0])),
        offset: new AMap.Pixel(-10, -10),
        // icon: icon1, // 添加 Icon 实例
        content: text,  // 自定义点标记覆盖物内容
        zoom: 13
      });
      map.add(marker);
    }
	  if (!isSupportCanvas()) {
        alert('热力图仅对支持canvas的浏览器适用,您所使用的浏览器不能使用热力图功能,请换个浏览器试试~')
		// uni.showToast({
		// 	title: '热力图仅对支持canv',
		// 	icon:'none'
		// });
		}

    //详细的参数,可以查看heatmap.js的文档 http://www.patrick-wied.at/static/heatmapjs/docs.html
    //参数说明如下:
    /* visible 热力图是否显示,默认为true
     * opacity 热力图的透明度,分别对应heatmap.js的minOpacity和maxOpacity
     * radius 势力图的每个点的半径大小
     * gradient  {JSON} 热力图的渐变区间 . gradient如下所示
     *	{
     .2:'rgb(0, 255, 255)',
     .5:'rgb(0, 110, 255)',
     .8:'rgb(100, 0, 255)'
     }
     其中 key 表示插值的位置, 0-1
     value 为颜色值
     */
    var heatmap;
    map.plugin(["AMap.Heatmap"], function () {
        //初始化heatmap对象
        heatmap = new AMap.Heatmap(map, {
            radius: 25, //给定半径
            opacity: [0, 0.8]
            /*,
            gradient:{
                0.5: 'blue',
                0.65: 'rgb(117,211,248)',
                0.7: 'rgb(0, 255, 0)',
                0.9: '#ffea00',
                1.0: 'red'
            }
             */
        });
        //设置数据集：该数据为北京部分“公园”数据
        heatmap.setDataSet({
            data: heatmapData,
            max: 100
        });
    });

    //判断浏览区是否支持canvas
    function isSupportCanvas() {
        var elem = document.createElement('canvas');
        return !!(elem.getContext && elem.getContext('2d'));
    }
  </script>
  <script type="text/javascript" src="https://webapi.amap.com/demos/js/liteToolbar.js"></script>
</body>
<style>
  .cs1 {
    background: url(./picture/hong.png) no-repeat;
    background-size: 100%;
    width: 50px;
    height: 50px;
    position: relative;
    z-index: 1
  }

  .cs1:hover {
    z-index: 5;
    transform: scale(1.2);
  }

  .cs2 {
    background: url(./picture/lan.png) no-repeat;
    background-size: 100%;
    width: 50px;
    height: 50px;
    z-index: 2;
    position: relative;
  }

  .cs2:hover {
    z-index: 5;
    transform: scale(1.2);
  }

  .cs3 {
    background: url(./picture/lan.png) no-repeat;
    background-size: 100%;
    width: 50px;
    height: 50px;
    position: relative;
    z-index: 3;
  }

  .cs3:hover {
    z-index: 5;
    transform: scale(1.2);
  }

  .cs4 {
    background: url(./picture/hui.png) no-repeat;
    background-size: 100%;
    width: 50px;
    height: 50px;
    position: relative;
    z-index: 4;
  }

  .cs4:hover {
    z-index: 5;
    transform: scale(1.2);
  }

  .text {
    color: #fff;
    position: absolute;
    width: 100%;
    height: 100%;
    line-height: 50px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    text-align: center;
    font-size: 14px;
  }
  
  .amap-zoomcontrol{
	  display: none;
  }
</style>

</html>